<template>
  <view class="container" v-if="!loading">
    <my-calendar ref="myCalendar" class="uni-calendar--hook" :lunar="info.lunar" :showMonth="false" @change="change" @monthSwitch="monthSwitch" />
    <view class="time-section">
      <view class="time-title">时辰</view>
      <view class="time-item-box">
        <view class="time-item" :class="currentIndex==index ? 'select-time' : ''" v-for="(item,index) in timeArr"
          :key="index" @click="timeChange(item, index)">
          {{ item.name }}
        </view>
      </view>
    </view>
    <view class="time-section">
      <view class="time-title">八字排盘</view>
      <sizhu ref="sizhu" :result="baziResult" :hasSex="false"></sizhu>
    </view>
    <view class="thanks">
      <view class="thanks-name">特别鸣谢：九龙先生</view>
      <view>作为易朴特邀名师，为本排盘所提供的内容支持。</view>
    </view>
    <activity-box :positionId="704"></activity-box>
    <uni-popup ref="popup" type="center" :is-mask-click="false">
      <view class="pop-box">
        <image class="popup-img" mode="heightFix" :src="popInfo" />
        <image class="popup-close" mode="heightFix" src="@/static/images/bazi/close.png" @click="closePop" />
      </view>
    </uni-popup>
  </view>
</template>
<script>
  import {
    getBaziResultApi,
    getMallListApi
  } from "@/http/api"
  import myCalendar from "./components/my-calendar/my-calendar.vue"
  import sizhu from "./components/sizhu.vue"
  /**
   * 获取任意时间
   */
  function getDate(date, AddDayCount = 0) {
    if (!date) {
      date = new Date()
    }
    if (typeof date !== 'object') {
      date = date.replace(/-/g, '/')
    }
    const dd = new Date(date)

    dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

    const y = dd.getFullYear()
    const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
    const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
    return {
      fullDate: y + '-' + m + '-' + d,
      year: y,
      month: m,
      date: d,
      day: dd.getDay()
    }
  }
  export default {
    components: {
      myCalendar,
      sizhu
    },
    data() {
      return {
        loading: true,
        info: {
          lunar: true,
          range: true,
          insert: false,
          selected: []
        },
        baziResult: {},
        timeArr: [{
            name: "子",
            time: "00:01"
          },
          {
            name: "丑",
            time: "02:01"
          },
          {
            name: "寅",
            time: "04:01"
          },
          {
            name: "卯",
            time: "06:01"
          },
          {
            name: "辰",
            time: "08:01"
          },
          {
            name: "巳",
            time: "10:01"
          },
          {
            name: "午",
            time: "12:01"
          },
          {
            name: "未",
            time: "14:01"
          },
          {
            name: "申",
            time: "16:01"
          },
          {
            name: "酉",
            time: "18:01"
          },
          {
            name: "戌",
            time: "20:01"
          },
          {
            name: "亥",
            time: "22:01"
          }
        ],
        currentIndex: 0,
        selectedDate: '',
        popInfo: '',
      }
    },
    methods: {
      timeChange(item, index) {
        if (index == this.currentIndex) return
        this.currentIndex = index;
        this.getBaziResultByDate();
      },
      change(data) {
        this.selectedDate = data.fulldate;
        this.getBaziResultByDate();
      },
      monthSwitch(data) {
        this.selectedDate = data.year + "-" + data.month + '-1';
        this.$refs.myCalendar.init(this.selectedDate);
        this.getBaziResultByDate();
      },
      getBaziResultByDate() {
        let dateArr = this.selectedDate.split("-");
        let year = dateArr[0];
        let month = dateArr[1];
        let day = dateArr[2];
        let tiemArr = this.timeArr[this.currentIndex].time.split(":");
        let hour = tiemArr[0];
        let minute = tiemArr[1];
        getBaziResultApi({
          userName: '',
          birthDay: `${year}-${month}-${day} ${hour}:${minute}`,
          districtGeocode: '',
          sex: "",
          solar: true
        }).then(res => {
          if (res.code == 200) {
            this.baziResult = res.data;
            uni.hideLoading();
            this.loading = false;
            this.$nextTick(() => {
              // this.$refs.sizhu.updateComponent()
            })
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            });
          }
        });
      },
      onLoad(a) {
        uni.showLoading({
          mask: true,
          title: "加载中",
        });
        setTimeout(() => {
          this.info.date = getDate(new Date(), -30).fullDate
          this.info.startDate = getDate(new Date(), -60).fullDate
          this.info.endDate = getDate(new Date(), 30).fullDate
        }, 2000);
        // 获取当前时间
        let nowDate = getDate(new Date());
        this.selectedDate = nowDate.fullDate;
        this.getBaziResultByDate();
        // 弹窗
        let num = uni.getStorageSync('concernAppJiuLongTips') || 0;
        if (num > 2) return;
        this.$refs.popup.open();
        this.popInfo = r.rows[0].imageLinks;
        uni.setStorageSync('concernAppJiuLongTips', ++num);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .container {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden;
  }

  .time-title {
    line-height: 60rpx;
    border-left: 10rpx solid #009688;
    border-radius: 0 4rpx 4rpx 0;
    background-color: #f2f2f2;
    padding-left: 20rpx;
    font-size: 30rpx;
    font-weight: bold;
  }

  .time-item-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 10rpx 0;
  }

  .time-item {
    color: #098;
    border: 2rpx solid #098;
    border-radius: 50%;
    cursor: pointer;
    height: 50rpx;
    width: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .select-time {
    background-color: #098;
    color: #fff;
  }
  .thanks {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-top: 30rpx;
  }
  .thanks-name {
    font-size: 36rpx;
  }
</style>